<template>
  <div class="container color-white" style="height: 100%">
    <div class="container color-white" w-750-300 flexcontainer v-show="isLogin">
      <div class="block" w-40></div>
      <div class="block" w-200 style="display: flex;align-items: center;">
        <div class="block" w-200-200 aspectratio aspect-ratio="200/200">
          <div aspectratio-content>
            <img src="../../assets/images/header.png" alt="" style="border-radius: 50%">
          </div>
        </div>
      </div>
      <div class="block" h-300>
        <ul>
          <li>Roser</li>
          <li>憋低头，王冠灰掉</li>
        </ul>
      </div>
    </div>
    <div class="block color-gray" h-20 v-show="isLogin"></div>
    <div class="container color-white background-header" w-750-300 flexcontainer v-show="!isLogin">
      <div class="block" w-40></div>
      <div class="block" w-200 style="display: flex;align-items: center;">
        <div class="block" w-200-200 aspectratio aspect-ratio="200/200">
          <div aspectratio-content>
            <img src="../../assets/images/avatar_male_100.png" alt="" style="border-radius: 50%">
          </div>
        </div>
      </div>
      <div class="block" h-300 style="display: flex;align-items: center;">
        <x-button class="btn-login" @click.native.prevent="handlerLogin">登录/注册</x-button>
      </div>
    </div>
    <div class="block color-gray" h-20 v-show="!isLogin"></div>
    <group>
      <cell is-link h-100>
        <span slot="icon" class="cell-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fabu"></use>
          </svg>
        </span>
        <span slot="title" class="cell-title">我发布的</span>
      </cell>
      <cell is-link h-100>
        <span slot="icon" class="cell-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-guanzhu-tianchong"></use>
          </svg>
        </span>
        <span slot="title" class="cell-title">我关注的</span>
      </cell>
      <cell is-link h-100>
        <span slot="icon" class="cell-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shezhi"></use>
          </svg>
        </span>
        <span slot="title" class="cell-title">设置</span>
      </cell>
    </group>

    <router-view></router-view>
  </div>
</template>


<script>
  import {Group, Cell, CellBox, XButton} from 'vux'

  export default {
    components: {
      Group,
      Cell,
      CellBox,
      XButton
    },
    data(){
        const _this = this;
        console.log(_this.$store.getters.token);
        return {
            isLogin:_this.$store.getters.isLogin
        }
    },
    methods: {
      handlerLogin(){
        console.log("test");
        const _this = this;
        _this.$router.push({path: 'login'});
      }
    }
  }
</script>
<style lang="less" scoped>

  .cell-icon {
    font-size: 35px;
  }

  .cell-title {
    margin-left: 20px
  }

  [w-750-300] {
    width: 750px;
    height: 300px;
  }

  .background-header {
    background-image: url("../../assets/images/background-header.png");
    background-size: 100% 100%;
    background-size: 750px 300px;
  }

  [w-200-200] {
    width: 200px;
    height: 200px;
  }

  [w-200-200] {
    aspect-ratio: '200:200';
  }

  [h-300] {
    height: 300px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }

  ul {
    margin-left: 20px;
  }

  ul li:first-child {
    font-size: 40px;
  }

  ul li:last-child {
    font-size: 28px;
    color: #b2b2b2;
  }

  .btn-login {
    /*    height: 50px;
        line-height: 50px;*/
    margin-left: 100px;
    /*    font-size: 32px;
        color: #ffffff;*/
  }

</style>
<style lang="less">
  .weui-cells {
    margin-top: 0 !important;
  }
</style>
